<template>
  <div class="hamburger" @click="toggleMenu">
    <div :class="['hamburger_btn', { active: isMenuOpen }]">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (e: "toggle", value: boolean): void;
}>();

const isMenuOpen = defineModel<boolean>({ default: false });

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
  emit("toggle", isMenuOpen.value);
};
</script>
